<template>
    <el-button plain @click="dialogVisible = true">
        创建出库订单
    </el-button>
    <el-dialog
        v-model="dialogVisible"
        title="创建出库订单"
        width="800"
    >
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="创建人名称">
                <el-input v-model="form.createUser" />
            </el-form-item>
            <el-form-item label="货物名称">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="货物种类">
                <el-input v-model="form.kind" />
            </el-form-item>
            <el-form-item label="选择入库订单" >
                <el-select v-model="submitForm.inboundId" placeholder="请选择" @visible-change="getIds">
                    <el-option v-for="item in options"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">

                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="货物数量">
                <el-input v-model="submitForm.number" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">Create</el-button>
                <el-button @click="dialogVisible = false">Cancel</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import {ref} from "vue";
import {createOutbound} from "@/api/createOutbound.js";
import {ElMessage} from "element-plus";
import {queryInbounds} from "@/api/queryInbounds.js";

const dialogVisible = ref(false);


const form = ref({
    createUser : "",
    name: "",
    kind: ""
})

const submitForm = ref({
    inboundId:"",
    number:""
})

const options = ref([]);




const getIds = async (isVisible) =>{
    const temp = [];

    if(isVisible){
        const result = await queryInbounds(form.value);
        result.data.data.forEach((item) =>{
            temp.push({
                label:"创建人:"+item.createUser+" 名称:"+item.name+" 种类:"+item.kind+" 剩余:"+item.remainNumber,
                value:item.id
            })
        });

        options.value = [...temp];

        console.log("finished")
    }

}

const onSubmit = async () =>{
    try{
        const result = await createOutbound(submitForm.value);
        ElMessage.success("创建成功");
    }catch (error){
        ElMessage.error("创建失败");
    }



}
</script>